<template>
	<view class="container position-relative">
		<view style="margin-bottom: 130rpx;">
			<view class="section-1">
			<!-- 	<template>
					<list-cell class="location">
						<view class="flex-fill d-flex justify-content-between align-items-center">
							<view class="store-name flex-fill">
								桌号：{{seat.seatNum}}
							</view>
							<image src="/static/images/navigator-1.png" class="arrow"></image>
						</view>
					</list-cell>
				</template> -->
				<template>
					<list-cell arrow class="meal-time">
						<view class="flex-fill d-flex justify-content-between align-items-center">
							<view class="title">预约取餐</view>
							<view class="">
								<picker mode="time" :value="time" :start="getNow()" end="23:59" @change="bindTimeChange">
										<view class="uni-input">{{time}}</view>
								</picker>
							</view>
						</view>
					</list-cell>
					<list-cell class="contact" last :hover="false">
						<view class="flex-fill d-flex justify-content-between align-items-center">
							<view class="title flex-fill">联系电话</view>
							<view class="time">
								<input class="text-right" placeholder="请输入手机号码" v-model="phoneNumber" />
							</view>
							<view class="contact-tip font-size-sm">自动填写</view>
						</view>
					</list-cell>
				</template>
			
			</view>
			<!-- 购物车列表 begin -->
			<view class="section-2">
				<view class="cart d-flex flex-column">
					<list-cell last v-for="(item, index) in cart" :key="index">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center mb-10">
								<view class="name-and-props overflow-hidden">
									<view class="text-color-base font-size-lg">
										{{ item.name }}
									</view>
								</view>
								<view class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-lg">
									<view>x{{ item.number }}</view>
									<view>￥{{ item.price }}</view>
								</view>
							</view>
							<view class="text-truncate font-size-base text-color-assist">
								{{ item.props_text||"" }}
							</view>
						</view>
					</list-cell>
				</view>
				<!-- 备注 begin -->
				<list-cell arrow last @click="goToRemark">
					<view class="d-flex flex-fill align-items-center justify-content-between overflow-hidden">
						<view class="flex-shrink-0 mr-20">备注</view>
						<view class="text-color-primary flex-fill text-truncate text-right">{{ remark || '点击填写备注' }}</view>
					</view>
				</list-cell>
				<!-- 备注 end -->
				<list-cell last>
					<view class="flex-fill d-flex justify-content-end align-items-center">
						<view>总计￥{{ total }},实付</view>
						<view class="font-size-extra-lg font-weight-bold">￥{{ amount }}</view>
					</view>
				</list-cell>
			</view>
			<!-- 购物车列表 end -->
			<view class="d-flex align-items-center justify-content-start font-size-sm text-color-warning" 
				style="padding: 20rpx 0;">
				<view class="iconfont iconhelp line-height-100"></view>
				<view>优惠券不与满赠、满减活动共享</view>
			</view>
			<!-- 支付方式 begin -->
			<view class="payment"  style="margin-bottom: 100rpx;">
				<list-cell last :hover="false">
					<text>支付方式</text>
				</list-cell>
				<list-cell>
					<view class="d-flex align-items-center justify-content-between w-100 disabled">
						<view class="iconfont iconbalance line-height-100 payment-icon"></view>
						<view class="flex-fill">余额支付（余额￥0）</view>
						<view class="font-size-sm">余额不足</view>
						<view class="iconfont iconradio-button-off line-height-100 checkbox"></view>
					</view>
				</list-cell>
				<list-cell last>
					<view class="d-flex align-items-center justify-content-between w-100">
						<view class="iconfont iconwxpay line-height-100 payment-icon" style="color: #7EB73A;"></view>
						<view class="flex-fill">微信支付</view>
						<view class="iconfont iconradio-button-on line-height-100 checkbox checked"></view>
					</view>
				</list-cell>
			</view>
			<!-- 支付方式 end -->
		
		</view>
		<!-- 付款栏 begin -->
		<view class="w-100 pay-box position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white">
			<view class="font-size-sm" style="margin-left: 20rpx;">合计：</view>
			<view class="font-size-lg flex-fill">￥{{ amount }}</view>
			<view class="bg-primary h-100 d-flex align-items-center just-content-center text-color-white font-size-base"
				style="padding: 0 60rpx;" @tap="submit">
				付款
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex'
	import listCell from '@/components/list-cell/list-cell'
	import modal from '@/components/modal/modal'
	import {parseTime} from "@/utils/data.js"
	const {addOrder} = require('@/api/api/order.js')
	export default {
		components: {
			listCell,
			modal
		},
		data() {
			return {
				time:parseTime(new Date(),"{h}:{i}"),
				cart: [],
				phoneNumber:"123456",
				remark:'',
				ensureAddressModalVisible: false
			}
		},
		computed: {
			...mapState('user',['user']),
			...mapState(['seat'],['seatId']),
			total() {
				return this.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
			},
			amount() {
				return this.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
			}
		},
		onLoad(option) {
			this.phoneNumber = this.user.phoneNumber
			const {remark} = option
			this.cart = uni.getStorageSync('cart')
			if(remark!=null)
				this.remark=remark;
		},
		methods: {
			...mapMutations(['SET_ORDER']),
			goToRemark() {
				uni.navigateTo({
					url: '/pages/remark/remark?remark=' + this.remark
				})
			},
			goToPackages() {
				uni.navigateTo({
					url: '/pages/packages/index'
				})
			},
			submit() {
				uni.showLoading({title: '加载中'})
				//提交订单操作
				// cart
				// id: good.id,
				// //分类id
				// cate_id: cate.id,
				// name: good.name,
				// price: good.price,
				// number: num,//数量
				// pricutre: good.pricutre,
				// useProperty: good.useProperty,
				// //一段文字，描述扩展
				// props_text: good.props_text,
				// //选择的扩展id列表
				// props: good.props
				//构造订单
				let d = new Date()
				let t = this.time
				let dd = t.split(':')
				d.setHours(dd[0])
				d.setMinutes(dd[1])
				console.log(dd)
				console.log(d)
				let order = {
					
					"remarks": this.remark,
					"total" : this.total,
					"mobile": this.phoneNumber,
					"orderFood":this.cart,
					"time":d
				}
				//测试订单
				console.log(order)
				//生成订单
				addOrder(order).then(res=>{
					console.log(res)
					
					uni.removeStorageSync('cart')
					
					uni.hideLoading()
					
					//这里做扣费处理 然后更新订单支付状态
					this.pay()
						
					//设置订单详情页
					this.SET_ORDER(order)
					
				
					uni.reLaunch({
						url: '/pages/orders/detail?id=' + res.data
					})
					
				})				
			},
			pay() {
				console.log("支付成功")
				
			},
			 bindTimeChange(e) {
			    this.time = e.detail.value
			},
			getNow(){
				return parseTime(new Date(),"{h}:{i}");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
	}
	
	.arrow {
		width: 50rpx; 
		height: 50rpx;
		position: relative;
		margin-right: -10rpx;
	}
	
	.location {
		.store-name {
			font-size: $font-size-lg;
		}
		
		.iconfont {
			font-size: 50rpx;
			line-height: 100%;
			color: $color-primary;
		}
	}
	
	.section-1 {
		margin-bottom: 30rpx;
		.contact {
			.contact-tip {
				margin-left: 10rpx;
				border: 2rpx solid $color-primary;
				padding: 6rpx 10rpx;
				color: $color-primary;
			}
		}
	}
	
	.section-2 {
		.name-and-props {
			width: 65%;
		}
	}
	
	.payment {
		padding-bottom: 50px;
		
		.disabled {
			color: $text-color-grey;
		}
		
		.payment-icon {
			font-size: 44rpx; 
			margin-right: 10rpx;
		}
		
		.checkbox {
			font-size: 36rpx;
			margin-left: 10rpx;
		}
		
		.checked {
			color: $color-primary;
		}
	}
	
	.pay-box {
		box-shadow: 0 0 20rpx rgba(0, 0, 0, .1);
		height: 100rpx;
	}
	
	.modal-content {
		.change-address-btn {
			line-height: 2;
			padding: 0 1em;
		}
		.pay_btn {
			width: 100%;
			border-radius: 50rem !important;
			line-height: 3;
		}
	}
</style>
